<template>
	<div>
		<Modal :closable="false" v-model="modal" width="80%">
	        <div slot="header">
	        	<div class="disFlex Flex-middle">
                   <p style="text-align: center;">模板选择</p>      
                </div>
	        </div>
            <!-- 表格 -->
            <div ref="tableContent" class="micropage-select-wrapper table-content" style="position: relative;overflow-x:hidden;">
                <Spin fix v-if="tableSpinShow"></Spin> 
                <Table align="center" :height="tableHeight"  stripe :columns="columns" :data="tableData">
                   
                </Table>
            </div>
             <div class="disFlex vertical" slot="footer">
                 <div>
                    <Row type="flex" v-show="moduleSelect.length" class="img-row">
                        <draggable class="drag" v-model="moduleSelect" :options="{animation: 150}">
                            <div class="moduleSelect-img disFlex Flex-middle" v-for="(item,index) in moduleSelect" :key="index">
                                <span style="margin-right: 10px;">{{item.tag_title}}</span>
                                <span @click="removeOne(index)" class="remove ivu-btn-primary">x</span>
                            </div>
                        </draggable>
                    </Row> 
                </div>
                
            </div>
	    </Modal>

	</div>
	
</template>

<script>
       
    import draggable from 'vuedraggable'

    import { getModuleList } from "api/messagePush.js"

	export default {
		props: {
            tagIdStr: {
                type: String,
                default: ''
            },
            selectNum: {
                type: [String, Number],
                default: 0
            }
		},
        data () {
            return {
                sIndex: -1,
                tableSpinShow: false,
                tableHeight: 0,
            	modal: false,
                search: "",
                page: 1,
                totalPage: 20,
                moduleSelect: [],
                columns: [
                {
                    title: '模板Id',
                    key: 'id'
                },
                {
                    title: '模板名称',
                    key: 'title'
                },
                {
                    title: '操作',
                    key: 'action',
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: "primary",
                                    size: "small"
                                },
                                on: {
                                    click: () => {
                                        this.$emit('confirm', params.row);
                                        this.modal = false;
                                    }
                                }
                            }, '选择')
                        ]);
                    }
                }],
                tableData: []
            }
        },
        methods: {
            searchData() {
                this.tableSpinShow = true;
                getModuleList({messageType: this.pushType}).then(_res=>{
                    this.tableSpinShow = false; 
                    this.tableData = _res.data;
                    // this.totalPage = _res.data.pages*20;
                    
                }).catch(err=>{
                    this.tableSpinShow = false;
                    this.$Message.error(err.message);   
                })
            },
            show(pushType){
            //    this.pushType = pushType == "TemplateMessage" ? "Template" : "MPTemplate";
               this.pushType = pushType;
        	   this.modal = true;
               this.searchData();
            },
            ok() {
                let arr  = this.moduleSelect.length ? this.moduleSelect.map(item => item.tag_id) : [];
                this.$emit('confirm', arr.length ? arr.join(',') : '', this.moduleSelect);
                this.modal = false;
            },
            removeOne(index){
                this.moduleSelect.splice(index, 1)
            },	
        },
        created() {

        },
        mounted() {
            this.$nextTick(function () {
                this.tableHeight = document.documentElement.clientHeight-300-100;
            })
        },
        components: {
            draggable
		}
     }
</script>

<style scoped lang="less">
	.moduleSelect-img{
        padding: 5px 10px;
        margin-right: 8px;
        border: 1px solid #e7e7e7;
        position: relative;
        cursor:move;
        .remove {
            display: block;
            // position: absolute;
            // top: 0;
            // right: -2px;
            width: 15px;
            height: 15px;
            text-align: center;
            line-height: 1.1;
            cursor: pointer;
        }
    }
    .img-row{
        margin-bottom: 10px;
        padding-bottom: 10px;
        overflow-x: scroll
    }
    .drag {
        display: flex;
    }
</style>
<style type="text/css">
    .micropage-select-wrapper.table-content .ivu-table td.log-content {
        padding: 16px 0;
    }

    .micropage-select-wrapper.table-content  .ivu-table-title {
        border-bottom: 1px solid #eeeeee;
    }
    
    .micropage-select-wrapper.table-content  .ivu-table:before {
        display: none!important;
        background-color: transparent!important;
    } 

    .micropage-select-wrapper.table-content  .ivu-table:after {
        width: 0!important;
        height: 100%!important;
        background: transparent!important;
        display: none!important;
    }

    .micropage-select-wrapper.table-content  .ivu-table-wrapper {
        border: none!important;
    }

    .micropage-select-wrapper.table-content  tr span {
        font-size: 12px!important;
    }

    .micropage-select-wrapper.table-content  .ivu-table-cell {
        padding-left: 18px!important;
    }
    
</style>

